<script setup>
import { ref , reactive , onMounted} from 'vue';
import qs from 'qs'
import { useUserStore  } from '../stores/user'
import articleMenu from "./articleMenu.vue"
import article from "../api/getArticle.js"
import recommand from "../api/recommand.js"
import recommandByAny from '../api/recommandAnonymous.js';
import { useRouter } from 'vue-router';
import getCarousel from '../api/getCarousel.js'
import ImageShow from './imageShow.vue';
const use = useRouter() ;
let userInform = useUserStore();
const count_num = window.innerHeight*0.4/50;
const count = ref(Math.floor(count_num))
const articlesList = ref([])
const carousels = ref({})

onMounted(()=>{
  recommand(localStorage.getItem("userId")).then((res)=>{
    if(res.status == 200)
    {
      articlesList.value = res.data
    }
    
  })
  getCarousel().then((res)=>{
    if(res.status == 200)
    {
      carousels.value = res.data
    }
  })
  if(articlesList.value[0] == undefined)
  {
    recommandByAny().then((res)=>{
        if(res.status == 200)
        articlesList.value = res.data
      })
  }
}
)

function ToArticle(value){
  use.push("/article?param="+value)
}
</script>

<template>
    <el-carousel height="40vh" direction="vertical" :autoplay="true" style="width: 60vw; position: absolute; left: 15vh;">
      <el-carousel-item v-for="item in carousels" :key="item">
        <a style="width: 100%; height: 100%;" :href="item.link">
        <img v-if="item.imageUrl != ''" :src="item.imageUrl" style="object-fit:cover;width: 100%; height: 100%;"/>
        <ImageShow v-else style="object-fit:cover;width: 100%; height: 100%;" :value="item.imageId"></ImageShow>
        </a>
        <div class="title_Box"></div>
        <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
      </el-carousel-item>
    </el-carousel>

    <div class="message-box">
      <ul class="infinite-list" style="overflow: auto ">
        <li v-for="(i,index) in articlesList" @click="ToArticle(i.id)" :key="i" class="infinite-list-item">{{ index+1 }}.&nbsp;&nbsp; <el-link> {{ i.title }}</el-link></li>
      </ul>
    </div>
    
    <div style="width: 84%; position: relative; left: 7%; top:1rem  ; margin-bottom: 1rem;">
      <articleMenu></articleMenu>
    </div>
</template>

<style>


.message-box {
    width: 22vw;
    position: relative;
    left: 70%;
}
.infinite-list {
  height: 40vh;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 40vh;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.title_Box{
  
}
</style>